<%--
  Created by IntelliJ IDEA.
  User: 施明
  Date: 2019/5/21
  Time: 20:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${path}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${path}/layuiadmin/style/admin.css" media="all">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
<!-- 增加商品-->


    <form class="layui-form" action="" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label" >一级分类</label>
            <div class="layui-input-inline">
                <select name="oneLevelSelect" id="oneLevelSelect" lay-filter="select1">
                    <option value="0" selected="">请选择</option>
                    <option value="1" >点心/饼干</option>
                    <option value="2">坚果</option>
                    <option value="3">熟食/肉类</option>
                    <option value="4">素食/卤味</option>
                    <option value="5">坚果/炒货</option>
                    <option value="6">糖果/蜜饯</option>
                    <option value="7">巧克力</option>s
                    <option value="8">海味/河鲜</option>
                    <option value="9">花茶/果茶</option>
                    <option value="10">品牌/礼包</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="twoLevelSelect" id="twoLevelSelect" lay-filter="twoLevelSelect">
                    <option value="0" selected="">一级</option>

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品名</label>
            <div class="layui-input-block">
                <input type="text" name="goodsname" id="goodsname" lay-verify="title"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品价格</label>
            <div class="layui-input-block">
                <input type="text" name="goodsprice" id="goodsprice" lay-verify="title"
                       autocomplete="off"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品标题</label>
            <div class="layui-input-block">
                <input type="text" name="goodstitle" id="goodstitle" lay-verify="title"
                       autocomplete="off"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">商品详情</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" id="goodsinformation" name="goodsinformation"  lay-verify="goodsinformation"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="addGoods">立即提交</button>
            </div>
        </div>
    </form>



<script src="${path}/layuiadmin/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use(['table','layedit','form'], function() {
        var table = layui.table;
        var form = layui.form;
        var layedit = layui.layedit;
        layedit.set({
            uploadImage: {
                url: 'uploadImage' //接口url
                ,type: '' //默认post
            }
        });
        //建立编辑器,上传图片和内容
        var editIndex=layedit.build(('goodsinformation'),{
            height: 500 ,//设置编辑器高度
            tool: ['left',
                'center',
                'right',
                'face',
               'strong',
                'image',
                'html',//源码模式,
            'preview'//预览
            ]
        });
        //富文框的内容与表单同步
        form.verify({
            content: function(value){
                layedit.sync(editIndex);
            }
        });
//头工具栏事件
                    form.on('select(select1)',function (data3) {
                        //获取选中后的value值
                        var onelevelid=data3.value
                        //获取第二个列表框，向列表中添加内容
                        $.ajax({
                            type : "get",
                            url : "selectByOneLevelId",
                            async:false,
                            data : {
                                "onelevelid":onelevelid
                            },
                            success : function(data) {
                                $("#twoLevelSelect").empty();
                                $.each(data,function(i,obj){
                                    console.log(i+','+obj.twolevelname);
                                    $('#twoLevelSelect').append('<option value="'+obj.twolevelid+'">'+obj.twolevelname+'</option>');
                                    form.render();
                                });
                            }
                        });
                    });


        //监听提交
        layui.form.on('submit(addGoods)', function (data2) {
            var d = data2.field;

           //匹配图片（g表示匹配所有结果i表示区分大小写） 匹配有img标签的
            var imgReg = /<img.*?(?:>|\/>)/gi;
            //匹配src属性
            var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
            //将获取的富文本框的值去匹配
            var arr = layedit.getContent(editIndex).match(imgReg);
            var pic="";
            //将匹配出的所有img循环，获取每一个的src后的图片名，有多个的用逗号拼接
            for (var i = 0; i < arr.length; i++) {
                var src = arr[i].match(srcReg);
                //获取图片地址
                if(src[1]){
                    if(i==arr.length-1){
                        pic+=src[1];
                    }else{
                        pic+=src[1]+",";
                    }

                }

            }


            $.ajax({
                    type: "get",
                    url: "toAddGoods",
                    data:{
                        "twolevelid":d.twoLevelSelect,
                        "goodsname":d.goodsname,
                        "goodsprice":d.goodsprice,
                        "goodstitle":d.goodstitle,
                        "goodsinformation":layedit.getContent(editIndex)
                    },
                    success: function (data) {
                        if (data.msg == "添加成功") {
                            layer.msg(data.msg, {
                                time: 1000
                            }, function () {
                                window.location.href="commodityList"
                            });
                        } else {
                            layer.msg(data.msg)
                        }
                    }
                });

            return false;
        });
    });

</script>

</body>

</html>